<template>
	<u-popup
		v-model="collectFeedShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="prop-title">饲料任务</view>
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<view class="feed-top">
					<view class="top-title">
						每日签到
						<image
							src="/static/images/chicken/feed_rule.png"
							mode="widthFix"></image>
					</view>
					<view class="top-bottom">
						<view class="bottom-left">
							<view class="bottom-left-line"></view>
							<view 
								v-for="(val, index) in feedList"
								:key="index"
								class="bottom-left-item">
								<image
									src="/static/images/chicken/feed_img.png"
									mode="widthFix"></image>
								<view :style="{ 
									opacity: val.isSign ? .5 : 1 
								}">
									x{{ val.feed }}
								</view>
								<view :class="{ 
									sign: val.isSign
								}">
									<u-icon
										v-if="val.isSign"
										name="checkbox-mark" />
									<text v-if="val.isToday">今天</text>
									<text v-else>第{{ val.day }}天</text>
								</view>
							</view>
						</view>
						<view class="bottom-right" @click="goSign">
							<image
								v-if="!isSign"
								src="/static/images/chicken/friend_add.png"
								mode="widthFix"></image>
							<image
								v-else
								src="/static/images/chicken/feed_sign_y.png"
								mode="widthFix"></image>
							<text>
								{{ !isSign ? '去签到' : '已签到' }}
							</text>
						</view>
					</view>
				</view>
				<view class="prop-box">
					<view
						v-for="(val, index) in taskList"
						:key="index"
						class="item">
						<image
							:src="val.taskImg"
							mode="widthFix"></image>
						<view class="item-center">
							<view>{{ val.title }}</view>
							<view>
								<view
									v-for="(v, i) in val.list"
									:key="i"
									class="center-item">
									<view>{{ v.name }}</view>
									<view v-show="v.num">
										<image
											src="/static/images/chicken/feed_task.png"
											mode="widthFix"></image>
										x{{ v.num }}
									</view>
								</view>
							</view>
						</view>
						<view class="item-btn" @click="goDoTask(val)">
							<text>
								{{ val.isDone ? val.btnDone : val.btnWill }}
							</text>
							<image
								v-if="!val.isDone"
								src="/static/images/chicken/friend_add.png"
								mode="widthFix"></image>
							<image
								v-else
								src="/static/images/chicken/feed_sign_y.png"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_feed.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myMessage',
		props: {
			collectFeedShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				feedList: [
					{
						day: 1,
						feed: 10,
						isToday: false,
						isSign: true,
					},
					{
						day: 2,
						feed: 20,
						isToday: false,
						isSign: true,
					},
					{
						day: 3,
						feed: 30,
						isToday: true,
						isSign: false,
					},
					{
						day: 4,
						feed: 40,
						isToday: false,
						isSign: false,
					},
					{
						day: 5,
						feed: 50,
						isToday: false,
						isSign: false,
					},
				],
				taskList: [
					{
						taskImg: '/static/images/chicken/feed_task_1.png',
						title: '领取小鸡饲料福利',
						btnWill: '去领取',
						btnDone: '已领取',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_2.png',
						title: '积分兑换饲料',
						btnWill: '去兑换',
						btnDone: '已兑换',
						isDone: false,
						list: [
							{ name: 'xxx积分可兑换饲料', num: '200' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_3.png',
						title: '小课堂答题得饲料',
						btnWill: '去答题',
						btnDone: '已答题',
						isDone: false,
						list: [
							{ name: '答对', num: '50' },
							{ name: '答错', num: '10' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_4.png',
						title: '浏览积分商城页面10s以上',
						btnWill: '去浏览',
						btnDone: '已浏览',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '200' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_5.png',
						title: '浏览兑换商城页面10s以上',
						btnWill: '去浏览',
						btnDone: '已浏览',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '50' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_6.png',
						title: '邀请好友助力(0/3)',
						btnWill: '去邀请',
						btnDone: '已邀请',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '200' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_7.png',
						title: '邀请好友注册',
						btnWill: '去邀请',
						btnDone: '已邀请',
						isDone: false,
						list: [
							{ name: '邀请成功获得饲料', num: '100' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_8.png',
						title: '通过农场入口激活信用卡',
						btnWill: '去激活',
						btnDone: '已激活',
						isDone: false,
						list: [
							{ name: '邀请成功获得饲料', num: '100' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_9.png',
						title: '通过农场入口办理信用卡',
						btnWill: '去办理',
						btnDone: '已办理',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '500' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_10.png',
						title: '通过农场入口绑定信用卡',
						btnWill: '去绑定',
						btnDone: '已绑定',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '200' },
						],
					},
					{
						taskImg: '/static/images/chicken/feed_task_11.png',
						title: '通过农场入口信用卡还款',
						btnWill: '去还款',
						btnDone: '已还款',
						isDone: false,
						list: [
							{ name: '获得饲料', num: '30' },
						],
					},
				],
				currentIndex: 0,
			}
		},
		mounted() {
			
		},
		computed: {
			isSign() {
				let obj = this.feedList.find(v => v.isToday);
				return obj.isSign;
			},
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'collectFeedShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			goSign() {
				let obj = this.feedList.find(v => v.isToday);
				obj.isSign = !obj.isSign;
				uni.showToast({
					title: '签到成功',
					icon: 'none',
				});
			},
			goDoTask(val) {
				val.isDone = true;
			},
			jump() {
				this.changeShow();
				this.$emit('jump', 'prop');
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 1094rpx;
		background-color: transparent;
		.prop-title {
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 1;
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: #732011;
			text-align: center;
			letter-spacing: 2rpx;
		}
		.center {
			position: absolute;
			left: 0;
			top: 276rpx;
			z-index: 1;
			width: calc(100% - 60rpx);
			height: calc(100% - 276rpx);
			padding: 0 30rpx;
			text-align: center;
			.feed-top {
				.top-title {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #732011;
					image {
						width: 32rpx;
						margin-left: 15rpx;
					}
				}
				.top-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					.bottom-left {
						position: relative;
						display: flex;
						justify-content: space-between;
						.bottom-left-line {
							position: absolute;
							left: 0;
							top: 20rpx;
							width: 100%;
							height: 6rpx;
							background: rgba(#ffdecf, .7);
						}
						.bottom-left-item {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							flex-shrink: 0;
							width: 100rpx;
							font-size: 20rpx;
							image {
								width: 40rpx;
							}
							> view:first-of-type {
								width: 56rpx;
								height: 24rpx;
								background: #ffb969;
								border: 1rpx solid #ffeeba;
								border-radius: 13rpx;
								margin: 20rpx 0 12rpx;
								color: #fff;
							}
							> view:last-of-type {
								color: #9C4601;
								&.sign {
									opacity: .5;
								}
							}
						}
					}
					.bottom-right {
						position: relative;
						image {
							width: 140rpx;
						}
						text {
							position: absolute;
							left: 50%;
							top: 14rpx;
							transform: translateX(-50%);
							width: 100%;
							font-size: 28rpx;
							font-weight: 500;
							color: #fff;
						}
					}
				}
			}
			.prop-box {
				margin-top: 40rpx;
			}
			.item {
				position: relative;
				display: flex;
				align-items: center;
				padding: 28rpx 24rpx;
				margin-bottom: 20rpx;
				background: #fff;
				border-radius: 20rpx;
				> image {
					width: 76rpx;
				}
				.item-center {
					width: calc(100% - 76rpx - 140rpx);
					padding-left: 16rpx;
					text-align: left;
					font-size: 24rpx;
					color: rgba(#732011, .5);
					> view:first-of-type {
						margin-bottom: 20rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #732011;
					}
					> view {
						display: flex;
						.center-item {
							display: flex;
							&:not(:first-of-type) {
								margin-left: 40rpx;
							}
							> view:last-of-type {
								display: flex;
								align-items: center;
								margin-left: 20rpx;
								color: #F14250;
								image {
									width: 22rpx;
									margin-right: 4rpx;
								}
							}
						}
					}
				}
				.item-btn {
					position: relative;
					image {
						width: 140rpx;
					}
					text {
						position: absolute;
						left: 50%;
						top: 14rpx;
						z-index: 1;
						transform: translateX(-50%);
						width: 100%;
						font-weight: 500;
						color: #fff;
					}
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 46rpx;
		}
	}
}
</style>